Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

183
Views
Problem when trying to add an element to a page using appendChild in JS. Throws an error: "is null, undefined"

I am trying to authorize the site through Firebase, everything works as it should, the data is sent to the Firebase server. But further, in the signIn function, I try to create a h2-element and put the mail data into it, which the user entered and clicked on the Login button (I want the mail to be displayed on the site instead of the name), then an error appears on the line where I highlighted with a red arrow: "autorizationName is null, undefined ", no data is sent to html. I can’t understand why, so help, please, I’m recently studying JS to figure it out.

This can happen if I added one JS script to two HTML pages? That is, index.html and autorization.html to the two I added autorization.js I wanted it to be redirected to the main page when authorizing from one page.

  const login = document.querySelector(".form-login")
  login.addEventListener('click', signIn)

function signIn() {
  const email = document.querySelector(".email").value
  const password = document.querySelector(".password").value
//   e.preventDefault()

  signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
          // Signed in 
          const user = userCredential.user;                        
          console.log("Email firebase: ",  user.email);           

          const user2 = JSON.parse(JSON.stringify(user.email))

          const autorizationName = document.querySelector(".autorization-name__container");
          const autorizationNameTitle = document.createElement("h2");
          autorizationNameTitle.textContent = user2;
          autorizationNameTitle.classList.add("autorization-name__title");
          

          autorizationName.appendChild(autorizationNameTitle); // Error: autorizationName is null, undefined
          window.location.replace("http://192.168.1.65:5500/")  
                 
      })

      .catch((error) => {
          const errorCode = error.code;
          const errorMessage = error.message;
          alert(errorMessage + ", " + errorCode);
      });
  }

Here are screenshots:

enter image description hereenter image description here

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

At the line of

autorizationName.appendChild(autorizationNameTitle);

you are getting an error which says that authorizationName is null, undefined. So, logically, we need to take a look at the place where its value was modified the last time (in this case, it is its initialization):

const autorizationName = document.querySelector(".autorization-name__container");

And it is a known fact that if your call to document.querySelector yields undefined, then the selector did not match any elements. So, the reason for the error is that there is no element in your page with the class of authorization-name__container at the time you try to find it. So, you will need to fix the selector or find out when the given element is created.

about 4 years ago · Juan Pablo Isaza Report

0

It is 100% an error with the string '.authorization-name__container', try to copy paste this class from where you have it in your code and double check for mispelled words. Then if that doesn't work try to use an id instead of a class

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!